<template>
  <div class="order-page">
    <front-header></front-header>

    <!-- 背景装饰 -->
    <div class="bg-decoration">
      <div class="circle circle-1"></div>
      <div class="circle circle-2"></div>
      <div class="circle circle-3"></div>
      <div class="leaf leaf-1"></div>
      <div class="leaf leaf-2"></div>
    </div>

    <div class="main-content">
      <!-- 页面标题 -->
      <div class="page-header">
        <div class="header-left">
          <h2>我的订单</h2>
          <div class="order-count">共 {{ total }} 个订单</div>
        </div>
        <div class="header-right">
          <el-button type="success" icon="el-icon-shopping-bag-1" @click="$router.push('/products')">继续购物</el-button>
        </div>
      </div>

      <!-- 订单列表 -->
      <div class="order-container" v-loading="loading">
        <!-- 空订单提示 -->
        <el-empty v-if="!loading && orders.length === 0" :image-size="200" class="empty-order">
          <template slot="description">
            <div class="empty-text">
              <p class="main-text">您还没有任何订单</p>
              <p class="sub-text">快去选购心仪的商品吧</p>
            </div>
          </template>
          <el-button type="primary" size="medium" @click="$router.push('/products')">
            <i class="el-icon-shopping-cart-2"></i>
            去购物
          </el-button>
        </el-empty>

        <!-- 订单列表 -->
        <div v-else class="order-list">
          <div v-for="order in orders" :key="order.id" class="order-card">
            <div class="order-header">
              <div class="order-info">
                <span class="order-id">订单ID：{{ order.id }}</span>
                <span class="order-no">订单号：{{ order.orderNo }}</span>
                <span class="order-time">{{ formatTime(order.createdAt) }}</span>
              </div>
              <div class="status-wrapper">
                <span class="order-status" :class="getStatusClass(order.status)">
                  {{ getStatusText(order.status) }}
                </span>
                <i class="el-icon-delete delete-icon" @click="handleDelete(order)"></i>
              </div>
            </div>

            <!-- 订单商品和收货信息 -->
            <div class="order-content">
              <div class="product-info">
                <el-image :src="order.product.imageUrl?.startsWith('http') ? order.product.imageUrl : `/api${order.product.imageUrl}`" fit="cover"
                  class="product-image" @click="$router.push(`/product/${order.product.id}`)">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
                <div class="product-details">
                  <h3 class="product-name">{{ order.product.name }}</h3>
                  <div class="product-price">
                    <span class="price" :class="{ 'discount': order.product.isDiscount }">
                      ¥{{ (order.product.isDiscount ? order.product.discountPrice : order.price).toFixed(2) }}
                    </span>
                    <span class="original-price" v-if="order.product.isDiscount">
                      ¥{{ order.product.price.toFixed(2) }}
                    </span>
                    <span class="quantity">x{{ order.quantity }}</span>
                  </div>
                  <!-- 库存和数量控制 -->
                  <div class="quantity-controls">
                    <span class="inventory">库存: {{ order.product.stock || 0 }}</span>
                    <div class="quantity-adjust" v-if="order.status === 0">
                      <el-input-number
                        v-model="order.quantity"
                        :min="1"
                        :max="order.product.stock"
                        size="small"
                        @change="handleQuantityChange(order)"
                      ></el-input-number>
                    </div>
                  </div>
                </div>

                <!-- 收货信息 -->
                <div class="delivery-info">
                  <div class="delivery-header">
                    <i class="el-icon-location"></i>
                    <span>收货信息</span>
                  </div>
                  <div class="info-item">
                    <i class="el-icon-user"></i>
                    <span>{{ order.recvName || '暂无收货人' }}</span>
                  </div>
                  <div class="info-item">
                    <i class="el-icon-phone"></i>
                    <span>{{ order.recvPhone || '暂无联系电话' }}</span>
                  </div>
                  <div class="info-item">
                    <i class="el-icon-location-outline"></i>
                    <span>{{ order.recvAddress || '暂无收货地址' }}</span>
                  </div>
                </div>
              </div>
            </div>

            <div class="order-footer">
              <div class="order-total">
                总计：<span class="total-price">¥{{ order.totalPrice.toFixed(2) }}</span>
              </div>
              <div class="order-actions">
                <el-button v-if="order.status === 0" type="primary" size="small" @click="showPaymentDialog(order)">
                  <i class="el-icon-wallet"></i> 立即支付
                </el-button>
                <el-button v-if="order.status === 2" type="success" size="small" @click="handleConfirm(order)">
                  <i class="el-icon-check"></i> 确认收货
                </el-button>
                <el-button v-if="order.status === 3" type="warning" size="small" @click="handleReview(order)">
                  <i class="el-icon-star-off"></i> 评价
                </el-button>
                <el-button v-if="[1, 2, 3].includes(order.status) && !order.hasRefundRecord && order.status !== 5" type="danger" size="small" @click="showRefundDialog(order)">
                  <i class="el-icon-refresh-left"></i> 申请退款
                </el-button>
                <el-button v-if="order.status === 0" type="danger" size="small" @click="handleCancel(order)">
                  <i class="el-icon-close"></i> 取消订单
                </el-button>
                <el-button v-if="[0, 1].includes(order.status)" type="warning" size="small" @click="showAddressDialog(order)">
                  <i class="el-icon-edit"></i> 修改收货信息
                </el-button>
                <el-button
                  v-if="order.status > 1"
                  type="info"
                  size="small"
                  @click="handleViewLogistics(order)">
                  <i class="el-icon-truck"></i> 查看物流
                </el-button>
                <el-button
                  v-if="[3, 4, 5].includes(order.status)"
                  type="danger"
                  size="small"
                  plain
                  @click="handleDelete(order)">
                  <i class="el-icon-delete"></i> 删除订单
                </el-button>
                <el-button
                  v-if="order.status === 5 || order.hasRefundRecord"
                  type="info"
                  size="small"
                  @click="handleViewRefund(order)">
                  <i class="el-icon-document"></i> 退款详情
                </el-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 分页 -->
        <div class="pagination-wrapper" v-if="total > 0">
          <el-pagination background :current-page.sync="currentPage" :page-size="pageSize" :total="total" layout="prev, pager, next, jumper"
            @current-change="getOrders">
          </el-pagination>
        </div>
      </div>
    </div>
    <front-footer></front-footer>

    <!-- 各种对话框保持不变 -->
    <!-- 支付方式选择对话框 -->
    <el-dialog title="选择支付方式" :visible.sync="paymentDialogVisible" width="30%" custom-class="custom-dialog">
      <div class="user-balance-info" v-if="userInfo && userInfo.balance !== undefined">
        <div class="balance-header">
          <i class="el-icon-wallet"></i>
          <span>当前账户余额</span>
        </div>
        <div class="balance-amount" :class="{ 'insufficient': userInfo.balance < currentOrder?.totalPrice }">
          ¥{{ userInfo.balance.toFixed(2) }}
        </div>
        <div class="balance-status" v-if="currentOrder">
          <template v-if="userInfo.balance >= currentOrder.totalPrice">
            <i class="el-icon-success"></i> 余额充足，可直接支付
          </template>
          <template v-else>
            <i class="el-icon-warning"></i> 余额不足，还差 ¥{{ (currentOrder.totalPrice - userInfo.balance).toFixed(2) }}
          </template>
        </div>
      </div>
      <div class="payment-options">
        <el-radio
          v-model="paymentMethod"
          label="balance"
          :disabled="userInfo.balance < currentOrder?.totalPrice">
          余额支付
          <template v-if="userInfo.balance < currentOrder?.totalPrice">
            <span class="insufficient-tip">(余额不足)</span>
          </template>
        </el-radio>
        <el-radio v-model="paymentMethod" label="alipay">支付宝支付</el-radio>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="paymentDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmPayment">确认支付</el-button>
      </span>
    </el-dialog>

    <!-- 删除订单确认对话框 -->
    <el-dialog
        title="确认删除订单"
        :visible.sync="deleteDialogVisible"
        width="30%"
        custom-class="custom-dialog"
    >
      <div class="delete-dialog-content">
        <i class="el-icon-warning-outline warning-icon"></i>
        <p class="delete-warning-text">确定要删除该订单吗？</p>
        <p class="delete-tip">删除后订单将无法恢复，请谨慎操作</p>
        <div class="order-delete-info">
          <p>订单号：{{ currentDeleteOrder?.orderNo }}</p>
          <p>订单金额：¥{{ currentDeleteOrder?.totalPrice.toFixed(2) }}</p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="deleteDialogVisible = false">取消</el-button>
    <el-button type="danger" @click="confirmDelete">确认删除</el-button>
  </span>
    </el-dialog>

    <!-- 修改收货地址对话框 -->
    <el-dialog title="修改收货信息" :visible.sync="addressDialogVisible" width="50%" custom-class="custom-dialog">
      <div class="address-dialog-content">
        <!-- 选择已有地址 -->
        <div v-if="!showAddressForm" class="address-list">
          <div class="dialog-section-title">
            <span>选择已有地址</span>
            <el-button type="text" @click="showAddressForm = true">使用新地址</el-button>
          </div>

          <el-radio-group v-model="selectedAddressId" class="address-radio-group">
            <div v-for="address in addresses" :key="address.id" class="address-item">
              <el-radio :label="address.id" border class="address-radio">
                <div class="address-info">
                  <div class="address-contact">
                    <span class="address-name">{{ address.receiver }}</span>
                    <span class="address-phone">{{ address.phone }}</span>
                  </div>
                  <div class="address-text">{{ address.address }}</div>
                </div>
              </el-radio>
              <div class="address-actions">
                <el-button type="text" size="mini" @click.stop="editAddress(address)">编辑</el-button>
                <el-button type="text" size="mini" class="delete-btn" @click.stop="deleteAddress(address)">删除</el-button>
              </div>
            </div>
          </el-radio-group>

          <div v-if="addresses.length === 0" class="no-address">
            <el-empty description="暂无保存的地址" :image-size="80">
              <el-button type="primary" size="small" @click="showAddressForm = true">添加新地址</el-button>
            </el-empty>
          </div>
        </div>

        <!-- 新增/编辑地址表单 -->
        <div v-if="showAddressForm" class="address-form" >
          <div class="dialog-section-title">
            <span>{{ addressForm.id ? '编辑地址' : '新增地址' }}</span>
            <el-button v-if="addresses.length > 0" type="text" @click="showAddressForm = false">返回选择</el-button>
          </div>

          <el-form :model="addressForm" :rules="addressRules" ref="addressForm" label-width="100px" class="address-edit-form">
            <el-form-item label="收货人" prop="receiver">
              <el-input v-model="addressForm.receiver" placeholder="请输入收货人姓名"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="addressForm.phone" placeholder="请输入联系电话"></el-input>
            </el-form-item>
            <el-form-item label="收货地址" prop="address">
              <el-input type="textarea" v-model="addressForm.address" placeholder="请输入详细地址" :rows="3"></el-input>
            </el-form-item>
            <el-form-item v-if="!addressForm.id">
              <el-checkbox v-model="saveToAddressBook">保存到地址簿</el-checkbox>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="addressDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateOrderAddress">确认</el-button>
      </div>
    </el-dialog>

    <!-- 添加评价对话框 -->
    <el-dialog title="商品评价" :visible.sync="reviewDialogVisible" width="50%" custom-class="custom-dialog">
      <div class="review-dialog-content" v-if="currentOrder">
        <div class="review-product-info">
          <el-image :src="currentOrder.product.imageUrl?.startsWith('http') ? currentOrder.product.imageUrl : `/api${currentOrder.product.imageUrl}`" fit="cover" class="review-product-image">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
          <div class="review-product-details">
            <h3 class="review-product-name">{{ currentOrder.product.name }}</h3>
            <div class="review-product-price">
              <span class="price">¥{{ (currentOrder.product.isDiscount ? currentOrder.product.discountPrice : currentOrder.price).toFixed(2) }}</span>
              <span class="quantity">x{{ currentOrder.quantity }}</span>
            </div>
          </div>
        </div>

        <el-form :model="reviewForm" :rules="reviewRules" ref="reviewForm" label-width="80px" class="review-form">
          <el-form-item label="评分" prop="rating">
            <el-rate v-model="reviewForm.rating" :colors="['#ff4757', '#ff4757', '#ff4757']" show-text :texts="['非常差', '差', '一般', '好', '非常好']"></el-rate>
          </el-form-item>

          <el-form-item label="评价内容" prop="content">
            <el-input type="textarea" v-model="reviewForm.content" :rows="4" placeholder="请分享您对商品的使用体验，帮助其他买家更好地了解商品"></el-input>
          </el-form-item>

          <el-form-item label="上传图片">
            <el-upload
              action="#"
              list-type="picture-card"
              :file-list="reviewImageFiles"
              :on-remove="handleReviewImageRemove"
              :http-request="uploadReviewImageRequest"
              :limit="6"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <div class="upload-tip">最多上传6张图片，每张不超过10MB</div>
          </el-form-item>

          <el-form-item>
            <el-checkbox v-model="reviewForm.isAnonymous">匿名评价</el-checkbox>
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="reviewDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitReview">提交评价</el-button>
      </div>
    </el-dialog>

    <!-- 添加退款申请对话框 -->
    <el-dialog title="申请退款" :visible.sync="refundDialogVisible" width="50%" custom-class="custom-dialog">
      <div class="refund-dialog-content" v-if="currentRefundOrder">
        <div class="refund-product-info">
          <el-image :src="currentRefundOrder.product.imageUrl?.startsWith('http') ? currentRefundOrder.product.imageUrl : `/api${currentRefundOrder.product.imageUrl}`" fit="cover" class="refund-product-image">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
          <div class="refund-product-details">
            <h3 class="refund-product-name">{{ currentRefundOrder.product.name }}</h3>
            <div class="refund-product-price">
              <span class="price">¥{{ (currentRefundOrder.product.isDiscount ? currentRefundOrder.product.discountPrice : currentRefundOrder.price).toFixed(2) }}</span>
              <span class="quantity">x{{ currentRefundOrder.quantity }}</span>
            </div>
            <div class="refund-order-info">
              <span class="order-no">订单号：{{ currentRefundOrder.orderNo }}</span>
              <span class="order-status">状态：{{ getStatusText(currentRefundOrder.status) }}</span>
            </div>
          </div>
        </div>

        <el-form :model="refundForm" :rules="refundRules" ref="refundForm" label-width="100px" class="refund-form">
          <el-form-item label="退款原因" prop="reason">
            <el-select v-model="refundForm.reason" placeholder="请选择退款原因" style="width: 100%">
              <el-option label="商品质量问题" value="商品质量问题"></el-option>
              <el-option label="商品与描述不符" value="商品与描述不符"></el-option>
              <el-option label="商品损坏" value="商品损坏"></el-option>
              <el-option label="多拍/拍错/不想要" value="多拍/拍错/不想要"></el-option>
              <el-option label="其他原因" value="其他原因"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="退款金额" prop="refundAmount">
            <el-input-number
              v-model="refundForm.refundAmount"
              :min="0.01"
              :max="currentRefundOrder.totalPrice"
              :precision="2"
              :step="0.01"
              style="width: 200px">
            </el-input-number>
            <span class="refund-amount-tip">最多 ¥{{ currentRefundOrder.totalPrice.toFixed(2) }}</span>
          </el-form-item>

          <el-form-item label="上传凭证">
            <el-upload
              action="#"
              list-type="picture-card"
              :file-list="refundEvidenceFiles"
              :on-remove="handleEvidenceRemove"
              :http-request="uploadEvidenceRequest"
              :limit="6"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <div class="upload-tip">最多上传6张凭证图片，每张不超过10MB</div>
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="refundDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitRefund">提交申请</el-button>
      </div>
    </el-dialog>

    <!-- 退款详情对话框 -->
    <el-dialog title="退款详情" :visible.sync="refundDetailDialogVisible" width="50%" custom-class="custom-dialog">
      <div v-loading="!refundDetail" class="refund-detail-content">
        <div v-if="refundDetail" class="refund-detail-wrapper">
          <div class="refund-status-header">
            <el-tag :type="getRefundStatusType(refundDetail.status)" size="medium">
              {{ getRefundStatusText(refundDetail.status) }}
            </el-tag>
            <div class="refund-amount">退款金额: <span>¥{{ refundDetail.refundAmount.toFixed(2) }}</span></div>
          </div>

          <div class="refund-detail-section">
            <h4 class="section-title">基本信息</h4>
            <div class="info-item">
              <span class="label">退款单号:</span>
              <span class="value">{{ refundDetail.refundNo }}</span>
            </div>
            <div class="info-item">
              <span class="label">申请时间:</span>
              <span class="value">{{ formatTime(refundDetail.applyTime) }}</span>
            </div>
            <div class="info-item">
              <span class="label">退款原因:</span>
              <span class="value">{{ refundDetail.refundReason }}</span>
            </div>
            <div class="info-item" v-if="refundDetail.processTime">
              <span class="label">处理时间:</span>
              <span class="value">{{ formatTime(refundDetail.processTime) }}</span>
            </div>
            <div class="info-item" v-if="refundDetail.successTime">
              <span class="label">退款成功时间:</span>
              <span class="value">{{ formatTime(refundDetail.successTime) }}</span>
            </div>
            <div class="info-item" v-if="refundDetail.merchantRemark">
              <span class="label">商家备注:</span>
              <span class="value">{{ refundDetail.merchantRemark }}</span>
            </div>
          </div>

          <div class="refund-detail-section" v-if="refundDetail.evidenceImages">
            <h4 class="section-title">凭证图片</h4>
            <div class="evidence-images">
              <el-image
                v-for="(img, index) in parseEvidenceImages(refundDetail.evidenceImages)"
                :key="index"
                :src="img"
                fit="cover"
                :preview-src-list="parseEvidenceImages(refundDetail.evidenceImages)"
                class="evidence-image">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
          </div>

          <div class="refund-detail-section">
            <h4 class="section-title">商品信息</h4>
            <div class="refund-product-card" v-if="refundDetail.order && refundDetail.order.product">
              <el-image
                :src="refundDetail.order.product.imageUrl?.startsWith('http') ? refundDetail.order.product.imageUrl : `/api${refundDetail.order.product.imageUrl}`"
                fit="cover"
                class="product-image">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
              <div class="product-info">
                <h5 class="product-name">{{ refundDetail.order.product.name }}</h5>
                <div class="product-price">
                  <span class="price">¥{{ refundDetail.order.totalPrice.toFixed(2) }}</span>
                  <span class="quantity">x{{ refundDetail.order.quantity }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="refundDetailDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 支付状态检查对话框 -->
    <el-dialog title="支付状态检查" :visible.sync="paymentStatusDialogVisible" width="40%" custom-class="custom-dialog" :close-on-click-modal="false" :show-close="false">
      <div class="payment-status-dialog-content">
        <!-- 加载中状态 -->
        <template v-if="paymentLoading">
          <div class="payment-status-icon loading">
            <i class="el-icon-loading"></i>
          </div>
          <h3 class="payment-status-title">正在检查支付状态</h3>
          <p class="payment-status-desc">系统正在检查您的支付结果，请稍候...</p>

          <div class="payment-countdown" v-if="pollingTimeLeft > 0">
            <span>下次检查倒计时：</span>
            <span class="countdown-number">{{ pollingTimeLeft }}</span>
            <span>秒</span>
          </div>
        </template>

        <!-- 等待用户确认状态 -->
        <template v-else>
          <div class="payment-status-icon warning">
            <i class="el-icon-warning-outline"></i>
          </div>
          <h3 class="payment-status-title">支付状态确认</h3>
          <p class="payment-status-desc">系统未能自动确认您的支付状态，请选择以下操作：</p>

          <div class="payment-status-tips">
            <h4>温馨提示</h4>
            <p>1. 如果您已完成支付，请点击"我已支付"按钮</p>
            <p>2. 如果您尚未支付或支付遇到问题，可以点击"支付失败"按钮</p>
            <p>3. 您也可以稍后在订单列表中重新发起支付</p>
          </div>
        </template>
      </div>

      <div slot="footer" class="dialog-footer">
        <template v-if="paymentLoading">
          <el-button @click="cancelPaymentCheck" type="info">取消检查</el-button>
        </template>
        <template v-else>
          <div class="payment-actions">
            <el-button @click="checkPaymentStatus(true)" type="primary">我已支付</el-button>
            <el-button @click="handlePaymentFailed" type="danger">支付失败</el-button>
          </div>
        </template>
      </div>
    </el-dialog>

    <!-- 查看物流对话框 -->
    <el-dialog title="物流详情" :visible.sync="logisticsDialogVisible" width="60%" custom-class="custom-dialog logistics-dialog">
      <div class="logistics-detail" v-loading="!logisticsInfo">
        <div v-if="logisticsInfo" class="logistics-detail-wrapper">
          <!-- 物流状态头部 -->
          <div class="logistics-status-header">
            <div class="status-left">
              <el-tag :type="getLogisticsStatusType(logisticsInfo.status)" size="medium">
                {{ logisticsStatusMap[logisticsInfo.status] }}
              </el-tag>
              <span class="update-time">更新于: {{ formatTime(logisticsInfo.lastUpdateTime) }}</span>
            </div>
            <div class="logistics-order-no">订单号: {{ logisticsInfo.orderId }}</div>
          </div>

          <!-- 快递信息卡片 -->
          <div class="logistics-info-card">
            <div class="card-header">
              <i class="el-icon-truck"></i>
              <span>快递信息</span>
            </div>
            <div class="card-content">
              <div class="express-company">

                <div class="company-info">
                  <div class="company-name">{{ logisticsInfo.companyName }}</div>
                  <div class="tracking-number">
                    <span>{{ logisticsInfo.trackingNumber }}</span>
                    <el-button
                      type="text"
                      size="mini"
                      icon="el-icon-document-copy"
                      @click="copyTrackingNumber(logisticsInfo.trackingNumber)">
                      复制单号
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 时间信息卡片 -->
          <div class="logistics-info-card">
            <div class="card-header">
              <i class="el-icon-time"></i>
              <span>配送时间</span>
            </div>
            <div class="card-content">
              <div class="time-info">
                <div class="time-item">
                  <div class="time-label">发货时间</div>
                  <div class="time-value">{{ formatTime(logisticsInfo.createdAt) }}</div>
                </div>

                <div class="time-item" v-if="logisticsInfo.expectedArrivalTime">
                  <div class="time-label">预计送达</div>
                  <div class="time-value">{{ formatTime(logisticsInfo.expectedArrivalTime) }}</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 收货信息卡片 -->
          <div class="logistics-info-card">
            <div class="card-header">
              <i class="el-icon-location"></i>
              <span>收货信息</span>
            </div>
            <div class="card-content">
              <div class="address-info">
                <div class="address-contact">
                  <span class="contact-name">{{ logisticsInfo.order?.recvName || '暂无收货人' }}</span>
                  <span class="contact-phone">{{ logisticsInfo.order?.recvPhone || '暂无联系电话' }}</span>
                </div>
                <div class="address-detail">
                  <i class="el-icon-location-outline"></i>
                  <span>{{ logisticsInfo.order?.recvAddress || '暂无收货地址' }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 物流状态卡片 -->
          <div class="logistics-info-card">
            <div class="card-header">
              <i class="el-icon-info"></i>
              <span>物流状态</span>
            </div>
            <div class="card-content">
              <div class="status-progress">
                <el-steps :active="getLogisticsStepActive(logisticsInfo.status)" finish-status="success" align-center>
                  <el-step title="已发货"></el-step>
                  <el-step title="运输中"></el-step>
                  <el-step title="已签收"></el-step>
                </el-steps>
              </div>
            </div>
          </div>
        </div>

        <!-- 无物流信息时显示 -->
        <div v-if="!logisticsInfo && !loading" class="no-logistics-info">
          <i class="el-icon-warning-outline"></i>
          <p>暂无物流信息</p>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="logisticsDialogVisible = false">我知道了</el-button>
      </div>
    </el-dialog>

    <!-- 其他对话框保持不变 -->
    <!-- ... existing dialogs ... -->
  </div>
</template>

<script>
import FrontHeader from '@/components/front/FrontHeader.vue'
import FrontFooter from '@/components/front/FrontFooter.vue'
import Request from '@/utils/request'
import { formatTime } from '@/utils/time'

export default {
  name: 'Order',
  components: {
    FrontHeader,
    FrontFooter
  },
  data() {
    return {
      userInfo: JSON.parse(localStorage.getItem('frontUser') || '{}'),
      loading: false,
      orders: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      paymentDialogVisible: false,
      paymentMethod: 'balance',
      currentOrder: null,
      addressDialogVisible: false,
      selectedAddressId: null,
      addresses: [],
      saveToAddressBook: false,
      addressForm: {
        id: '',
        receiver: '',
        phone: '',
        address: ''
      },
      currentEditOrder: null,
      addressRules: {
        receiver: [
          { required: true, message: '请输入收货人', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入收货地址', trigger: 'blur' }
        ]
      },
      showAddressForm: false,
      refundDialogVisible: false,
      refundForm: {
        reason: '',
        refundAmount: 0,
        evidenceImages: ''
      },
      refundRules: {
        reason: [
          { required: true, message: '请选择退款原因', trigger: 'change' }
        ],
        refundAmount: [
          { required: true, message: '请输入退款金额', trigger: 'blur' },
          { type: 'number', min: 0.01, message: '退款金额必须大于0', trigger: 'blur' }
        ]
      },
      currentRefundOrder: null,
      reviewDialogVisible: false,
      reviewForm: {
        rating: 5,
        content: '',
        isAnonymous: false
      },
      reviewRules: {
        rating: [
          { required: true, message: '请选择评分', trigger: 'change' }
        ],
        content: [
          { required: true, message: '请填写评价内容', trigger: 'blur' },
          { min: 5, max: 500, message: '评价内容长度在 5 到 500 个字符', trigger: 'blur' }
        ]
      },
      deleteDialogVisible: false,
      currentDeleteOrder: null,
      logisticsDialogVisible: false,
      logisticsInfo: null,
      logisticsStatusMap: {
        0: '待发货',
        1: '已发货',
        2: '已签收',
        3: '已取消',
        5: '已退款'
      },
      defaultTrackingInfo: [
        {
          time: formatTime(new Date()),
          context: '暂无物流轨迹信息'
        }
      ],
      paymentStatusDialogVisible: false,
      paymentLoading: true,
      pollingTimer: null,
      pollingInterval: 5, // 轮询间隔（秒）
      pollingTimeLeft: 5,
      pollingCountdown: null,
      maxPollingAttempts: 6, // 最大轮询次数
      pollingAttempts: 0,
      detailDialogVisible: false,
      refundEvidenceFiles: [],
      refundDetailDialogVisible: false,
      refundDetail: null,
      uploadEvidenceImages: [],
      reviewImageFiles: [],
      uploadReviewImages: []
    }
  },
  created() {
    this.getOrders()
  },
  mounted() {
    this.userInfo = JSON.parse(localStorage.getItem('frontUser') || '{}')
  },
  methods: {
    isLogin() {
      const userStr = localStorage.getItem('frontUser')
      if (!userStr) {
        this.$message({
          type: 'warning',
          message: '请先登录'
        })
        this.$router.push('/login')
        return
      }
    },
    formatTime,
    async getOrders() {
      this.isLogin()
      this.loading = true
      try {
        const userId = this.userInfo.id
        const res = await Request.get('/order/page', {
          params: {
            userId,
            currentPage: this.currentPage,
            size: this.pageSize
          }
        })
        if (res.code === '0') {
          if (res.data.total === 0) {
            this.orders = []
            this.total = 0
          } else {
            this.orders = res.data.records
            this.total = res.data.total

            // 检查每个订单是否有退款记录
            for (const order of this.orders) {
              await this.checkRefundRecord(order)
            }
          }
        }
      } catch (error) {
        console.error('获取订单列表失败:', error)
        this.$message.error('获取订单列表失败')
      } finally {
        this.loading = false
      }
    },

    getStatusText(status) {
      const statusMap = {
        0: '待支付',
        1: '已支付',
        2: '已发货',
        3: '已完成',
        4: '已取消',
        5: '已退款'
      }
      return statusMap[status] || '未知状态'
    },

    getStatusClass(status) {
      const classMap = {
        0: 'pending',
        1: 'paid',
        2: 'shipped',
        3: 'completed',
        4: 'cancelled',
        5: 'refunded'
      }
      return classMap[status] || ''
    },
    async handleAlipay(order) {
      this.isLogin()
      try {
        console.log('发起支付请求，订单ID:', order.id);

        // 打开支付页面
         window.open('http://localhost:1234/api/alipay/pay/' + order.id, '_blank');
        this.paymentDialogVisible = false;

        // 显示支付状态检查对话框
        this.currentOrder = order;
        this.paymentStatusDialogVisible = true;
        this.paymentLoading = true;
        this.pollingAttempts = 0;
        this.startPolling();

      } catch (error) {
        console.error('支付请求异常:', error);
        this.$message.error('支付请求失败：' + error.message);
      }
    },

    // 开始轮询检查支付状态
    startPolling() {
      this.pollingTimeLeft = this.pollingInterval;

      // 倒计时
      this.pollingCountdown = setInterval(() => {
        this.pollingTimeLeft--;
        if (this.pollingTimeLeft <= 0) {
          clearInterval(this.pollingCountdown);
        }
      }, 1000);

      // 设置轮询检查
      this.pollingTimer = setTimeout(() => {
        this.checkPaymentStatus();
      }, this.pollingInterval * 1000);
    },

    // 检查支付状态
    async checkPaymentStatus(isUserConfirm = false) {
      // 清除计时器
      clearTimeout(this.pollingTimer);
      clearInterval(this.pollingCountdown);

      if (!this.currentOrder) {
        this.paymentStatusDialogVisible = false;
        return;
      }

      this.pollingAttempts++;
      this.paymentLoading = true;

      try {
        // 调用后端接口检查订单支付状态
        const res = await Request.get(`/order/${this.currentOrder.id}/status`);

        if (res.code === '0' && res.data >= 1) {
          // 已支付
          this.$message.success('支付成功！');
          this.paymentStatusDialogVisible = false;
          this.getOrders(); // 刷新订单列表
        } else if (isUserConfirm) {
          // 如果是用户确认支付成功但后台检查未支付
          this.$message.error('支付验证失败，请确认您的支付是否完成');
          this.paymentLoading = false;
        } else if (this.pollingAttempts >= this.maxPollingAttempts) {
          // 超过最大尝试次数，让用户手动确认
          this.paymentLoading = false;
        } else {
          // 继续轮询
          this.startPolling();
        }
      } catch (error) {
        console.error('检查支付状态失败:', error);

        if (isUserConfirm) {
          this.$message.error('支付状态验证失败，请稍后再试');
          this.paymentLoading = false;
        } else if (this.pollingAttempts >= this.maxPollingAttempts) {
          this.paymentLoading = false;
        } else {
          this.startPolling();
        }
      }
    },

    // 用户确认支付失败
    handlePaymentFailed() {
      clearTimeout(this.pollingTimer);
      clearInterval(this.pollingCountdown);
      this.$message({
        type: 'info',
        message: '您可以稍后在订单列表中重新尝试支付'
      });
      this.paymentStatusDialogVisible = false;
    },

    // 取消支付检查
    cancelPaymentCheck() {
      clearTimeout(this.pollingTimer);
      clearInterval(this.pollingCountdown);

      // 提示用户取消可能导致的后果
      this.$confirm('取消检查可能导致支付状态不同步，您可以稍后在订单列表查看支付状态', '确认取消', {
        confirmButtonText: '确认',
        cancelButtonText: '继续检查',
        type: 'warning'
      }).then(() => {
        this.paymentStatusDialogVisible = false;
      }).catch(() => {
        // 用户选择继续检查，重新开始轮询
        this.pollingAttempts = 0;
        this.startPolling();
      });
    },

    async handleConfirm(order) {
      try {
        await this.$confirm('确认已收到商品吗？', '提示', {
          type: 'warning'
        })
        const res = await Request.put(`/order/${order.id}/status?status=3`);
        if (res.code === '0') {
          this.$message.success('确认收货成功')
          this.getOrders()
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error('确认收货失败:', error)
          this.$message.error('确认收货失败')
        }
      }
    },

    handleReview(order) {
      // 确保order包含完整的商品信息
      this.currentOrder = {
        ...order,
        product: {
          ...order.product
        }
      }
      this.reviewForm = {
        rating: 5,
        content: '',
        isAnonymous: false
      }
      this.reviewImageFiles = [];
      this.uploadReviewImages = [];
      this.reviewDialogVisible = true
    },

    async handleCancel(order) {
      this.isLogin()
      try {
        await this.$confirm('确定要取消订单吗？', '提示', {
          type: 'warning'
        })
        const res = await Request.put(`/order/${order.id}/status?status=4`);
        if (res.code === '0') {
          this.$message.success('订单已取消')
          this.getOrders()
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error('取消订单失败:', error)
          this.$message.error('取消订单失败')
        }
      }
    },

    async showPaymentDialog(order) {
      this.isLogin()
      this.currentOrder = order

      // 获取最新的用户余额
      try {
        const balanceRes = await Request.get(`/user/balance/${this.userInfo.id}`);
        if (balanceRes.code === '0') {
          // 更新用户余额信息
          this.userInfo.balance = balanceRes.data;

          // 更新本地存储的用户信息
          const updatedUser = {...this.userInfo};
          localStorage.setItem('frontUser', JSON.stringify(updatedUser));

          // 如果余额足够，默认选择余额支付，否则选择支付宝支付
          this.paymentMethod = this.userInfo.balance >= order.totalPrice ? 'balance' : 'alipay';
        }
      } catch (error) {
        console.error('获取用户余额失败:', error);
        this.paymentMethod = 'alipay'; // 获取余额失败时默认选择支付宝支付
      }

      this.paymentDialogVisible = true
    },

    async confirmPayment() {
      try {
        if (this.paymentMethod === 'balance') {
          // 先检查余额是否足够
          const balanceRes = await Request.get(`/user/balance/${this.userInfo.id}`);
          if (balanceRes.code === '0') {
            const userBalance = balanceRes.data;
            if (userBalance < this.currentOrder.totalPrice) {
              this.$message.error(`余额不足，当前余额: ¥${userBalance.toFixed(2)}，需要: ¥${this.currentOrder.totalPrice.toFixed(2)}`);
              return;
            }

            // 使用余额支付
            const res = await Request.post(`/user/balance/deduct/${this.userInfo.id}?amount=${this.currentOrder.totalPrice}`);

            if (res.code === '0') {
              // 更新订单状态
              const orderRes = await Request.put(`/order/${this.currentOrder.id}/status?status=1`);
              if (orderRes.code === '0') {
                this.$message.success('支付成功');
                this.paymentDialogVisible = false;
                this.getOrders(); // 刷新订单列表

                // 更新本地存储的用户余额
                const updatedUser = {...this.userInfo, balance: res.data};
                localStorage.setItem('frontUser', JSON.stringify(updatedUser));
              } else {
                this.$message.error(orderRes.msg || '订单状态更新失败');
              }
            } else {
              this.$message.error(res.msg || '支付失败');
            }
          } else {
            this.$message.error(balanceRes.msg || '获取余额失败');
          }
        } else if (this.paymentMethod === 'alipay') {
          this.handleAlipay(this.currentOrder);
        }
      } catch (error) {
        console.error('支付失败:', error);
        this.$message.error('支付失败');
      }
    },

    async getAddresses() {
      this.isLogin()
      try {
        const userId = this.userInfo.id
        const res = await Request.get(`/address/user/${userId}`)
        if (res.code === '0') {
          this.addresses = res.data
        }
      } catch (error) {
        console.error('获取地址列表失败:', error)
        this.$message.error('获取地址列表失败')
      }
    },

    // 添加编辑地址方法
    editAddress(address) {
      this.showAddressForm = true
      this.addressForm = {
        id: address.id,
        receiver: address.receiver,
        phone: address.phone,
        address: address.address
      }
    },

    // 添加删除地址方法
    async deleteAddress(address) {
      try {
        await this.$confirm('确定要删除该地址吗？', '提示', {
          type: 'warning'
        })
        const res = await Request.delete(`/address/${address.id}`)
        if (res.code === '0') {
          this.$message.success('删除地址成功')
          this.getAddresses() // 刷新地址列表
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error('删除地址失败:', error)
          this.$message.error('删除地址失败')
        }
      }
    },

    formatAddress(addr) {
      return `${addr.receiver ? addr.receiver + ' ' : ''}${addr.phone} ${addr.address}`
    },

    showAddressDialog(order) {
      this.currentEditOrder = order
      this.addressForm = {
        id: '',
        receiver: order.recvName || '',
        phone: order.recvPhone || '',
        address: order.recvAddress || ''
      }
      this.selectedAddressId = null
      this.saveToAddressBook = false
      this.showAddressForm = false
      this.addressDialogVisible = true
      // 确保在DOM更新后再获取地址列表
      this.$nextTick(() => {
        this.getAddresses()
      })
    },

    async updateOrderAddress() {
      try {
        if (this.showAddressForm) {
          // 如果是新增地址，验证表单
          if (this.$refs.addressForm) {
            await this.$refs.addressForm.validate()
          } else {
            this.$message.error('表单引用不存在')
            return
          }
        } else if (!this.selectedAddressId && this.addresses.length > 0) {
          // 如果是选择已有地址，验证是否已选择
          this.$message.warning('请选择收货地址')
          return
        }

        let receiver, phone, address, addressId
        if (this.showAddressForm) {
          // 使用表单数据
          receiver = this.addressForm.receiver
          phone = this.addressForm.phone
          address = this.addressForm.address
          addressId = this.addressForm.id // 获取地址ID，用于判断是新增还是编辑

          // 如果有地址ID，说明是编辑已有地址
          if (addressId) {
            // 更新地址簿中的地址
            const updateRes = await Request.put(`/address/${addressId}`, {
              id: addressId,
              userId: this.userInfo.id,
              receiver,
              phone,
              address
            })
            if (updateRes.code !== '0') {
              this.$message.error('更新地址失败')
              return
            }
          } else if (this.saveToAddressBook) {
            // 如果是新地址且需要保存到地址簿
            const userId = this.userInfo.id
            await Request.post('/address', {
              userId,
              receiver,
              phone,
              address
            })
          }
        } else {
          // 使用选中的地址
          const selectedAddress = this.addresses.find(addr => addr.id === this.selectedAddressId)
          receiver = selectedAddress.receiver
          phone = selectedAddress.phone
          address = selectedAddress.address
        }

        // 更新订单收货信息
        const orderRes = await Request.put(`/order/${this.currentEditOrder.id}/address`, null, {
          params: {
            name: receiver,
            address,
            phone
          }
        })

        if (orderRes.code === '0') {
          this.$message.success('收货信息更新成功')
          this.addressDialogVisible = false
          this.getOrders() // 刷新订单列表
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error('更新收货信息失败:', error)
          this.$message.error('更新收货信息失败')
        }
      }
    },

    // 检查订单是否有退款记录
    async checkRefundRecord(order) {
      try {
        const res = await Request.get(`/refund/order/${order.id}`)
        // 如果返回成功，说明有退款记录
        if (res.code === '0') {
          this.$set(order, 'hasRefundRecord', true)
          // 可以保存退款记录信息以便后续使用
          this.$set(order, 'refundInfo', res.data)
          return true
        } else {
          this.$set(order, 'hasRefundRecord', false)
          return false
        }
      } catch (error) {
        console.error('检查退款记录失败:', error)
        this.$set(order, 'hasRefundRecord', false)
        return false
      }
    },

    // 显示退款对话框
    async showRefundDialog(order) {
      // 再次检查是否有退款记录
      const hasRefund = await this.checkRefundRecord(order)
      if (hasRefund) {
        this.$message.warning('该订单已有退款申请，不能重复申请')
        return
      }

      // 检查订单状态是否为已退款
      if (order.status === 5) {
        this.$message.warning('该订单已退款，不能重复申请')
        return
      }

      this.currentRefundOrder = order
      this.refundForm = {
        reason: '',
        refundAmount: order.totalPrice,
        evidenceImages: ''
      }
      this.refundEvidenceFiles = []
      this.refundDialogVisible = true
    },

    // 处理凭证图片上传请求
    uploadEvidenceRequest(options) {
      const file = options.file;

      // 检查文件类型和大小
      const isImage = file.type.startsWith('image/');
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isImage) {
        this.$message.error('上传文件只能是图片格式!');
        return false;
      }

      if (!isLt10M) {
        this.$message.error('上传图片大小不能超过 10MB!');
        return false;
      }

      const formData = new FormData();
      formData.append('file', file);  // 参数名必须是'file'，与后端接口匹配

      // 发送上传请求到专用的文件上传接口
      Request.post('/file/upload/img', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
          'token': JSON.parse(localStorage.getItem('frontUser') || '{}').token
        }
      }).then(res => {
        if (res.code === '0') {
          // 上传成功，添加到凭证列表
          this.refundEvidenceFiles.push({
            name: file.name,
            url: `/api${res.data}`,
            path: res.data // 保存实际路径
          });

          // 保存上传的图片路径
          this.uploadEvidenceImages.push(res.data);

          this.$message.success('图片上传成功');
        } else {
          this.$message.error(res.msg || '图片上传失败');
        }
      }).catch(error => {
        console.error('图片上传失败:', error);
        this.$message.error(error.message || '图片上传失败');
      });
    },

    // 处理移除凭证图片
    handleEvidenceRemove(file, fileList) {
      this.refundEvidenceFiles = fileList;

      // 从上传列表中移除对应图片
      const index = this.uploadEvidenceImages.findIndex(path => file.path === path);
      if (index !== -1) {
        this.uploadEvidenceImages.splice(index, 1);
      }
    },

    // 提交退款申请
    submitRefund() {
      this.$refs.refundForm.validate(async (valid) => {
        if (valid) {
          try {
            // 创建退款对象
            const refundData = {
              orderId: this.currentRefundOrder.id,
              orderNo: this.currentRefundOrder.orderNo,
              userId: this.userInfo.id,
              refundAmount: this.refundForm.refundAmount,
              refundReason: this.refundForm.reason,
              evidenceImages: this.uploadEvidenceImages.length > 0 ? JSON.stringify(this.uploadEvidenceImages) : null
            };

            const res = await Request.post('/refund/apply', refundData);

            if (res.code === '0') {
              this.$message.success('退款申请已提交，请等待商家处理')
              this.refundDialogVisible = false
              this.getOrders()
            } else {
              this.$message.error(res.msg || '退款申请失败')
            }
          } catch (error) {
            console.error('退款申请失败:', error)
            this.$message.error('退款申请失败')
          }
        }
      })
    },

    // 处理评价图片上传请求
    uploadReviewImageRequest(options) {
      const file = options.file;

      // 检查文件类型和大小
      const isImage = file.type.startsWith('image/');
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isImage) {
        this.$message.error('上传文件只能是图片格式!');
        return false;
      }

      if (!isLt10M) {
        this.$message.error('上传图片大小不能超过 10MB!');
        return false;
      }

      const formData = new FormData();
      formData.append('file', file);  // 参数名必须是'file'，与后端接口匹配

      // 发送上传请求到专用的文件上传接口
      Request.post('/file/upload/img', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
          'token': JSON.parse(localStorage.getItem('frontUser') || '{}').token
        }
      }).then(res => {
        if (res.code === '0') {
          // 上传成功，添加到凭证列表
          this.reviewImageFiles.push({
            name: file.name,
            url: `/api${res.data}`,
            path: res.data // 保存实际路径
          });

          // 保存上传的图片路径
          this.uploadReviewImages.push(res.data);

          this.$message.success('图片上传成功');
        } else {
          this.$message.error(res.msg || '图片上传失败');
        }
      }).catch(error => {
        console.error('图片上传失败:', error);
        this.$message.error(error.message || '图片上传失败');
      });
    },

    // 处理移除评价图片
    handleReviewImageRemove(file, fileList) {
      this.reviewImageFiles = fileList;

      // 从上传列表中移除对应图片
      const index = this.uploadReviewImages.findIndex(path => file.path === path);
      if (index !== -1) {
        this.uploadReviewImages.splice(index, 1);
      }
    },

    // 提交评价
    async submitReview() {
      try {
        await this.$refs.reviewForm.validate()
        this.isLogin()
        const reviewData = {
          userId: this.userInfo.id,
          productId: this.currentOrder.product.id,
          orderId: this.currentOrder.id,
          rating: this.reviewForm.rating,
          content: this.reviewForm.content,
          isAnonymous: this.reviewForm.isAnonymous ? 1 : 0,
          images: this.uploadReviewImages.length > 0 ? JSON.stringify(this.uploadReviewImages) : null
        }

        const res = await Request.post('/review', reviewData)
        if (res.code === '0') {
          this.$message.success('评价成功')
          this.reviewDialogVisible = false
          // 更新订单状态为已评价
          await Request.put(`/order/${this.currentOrder.id}/status?status=3`)
          this.getOrders()
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error('评价失败:', error)
          this.$message.error('评价失败')
        }
      }
    },
    async handleQuantityChange(order) {
      try {
        // 创建更新订单对象
        const updateOrder = {
          id: order.id,
          quantity: order.quantity,
          totalPrice: order.quantity * (order.product.isDiscount ? order.product.discountPrice : order.price)
        };

        const res = await Request.put(`/order/${order.id}`, updateOrder);

        if (res.code === '0') {
          // 更新本地订单总价
          order.totalPrice = updateOrder.totalPrice;
          this.$message.success('数量修改成功');
        } else {
          this.$message.error(res.msg || '修改失败');
          // 修改失败时重新获取订单列表
          this.getOrders();
        }
      } catch (error) {
        console.error('修改数量失败:', error);
        this.$message.error('修改数量失败');
        // 修改失败时重新获取订单列表
        this.getOrders();
      }
    },
    handleDelete(order) {
      // 防止快速连续点击
      if (this.deleteDialogVisible) return;

      this.currentDeleteOrder = order;
      this.deleteDialogVisible = true;
      console.log('准备删除订单:', order.id); // 调试日志
    },

    /// 确认删除订单（修复后的版本）
    async confirmDelete() {
      if (!this.currentDeleteOrder) {
        this.$message.error('订单信息错误');
        this.deleteDialogVisible = false;
        return;
      }

      try {
        // 使用this.$msgbox创建加载提示
        this.$msgbox({
          message: '<div class="custom-loading"><i class="el-icon-loading"></i> 正在删除...</div>',
          type: 'info',
          showCancelButton: false,
          showConfirmButton: false,
          closeOnPressEscape: false,
          closeOnClickModal: false,
          customClass: 'custom-loading-message'
        });

        const res = await Request.delete(`/order/${this.currentDeleteOrder.id}`);

        // 关闭加载提示 - 使用this.$msgbox.close()而不是loadingInstance.close()
        this.$msgbox.close();

        if (res.code === '0') {
          this.$message.success('订单删除成功');
          this.deleteDialogVisible = false;
          this.getOrders(); // 刷新订单列表
        } else {
          this.$message.error(res.msg || '删除失败');
        }
      } catch (error) {
        // 确保关闭加载提示
        this.$msgbox.close();

        console.error('删除订单失败:', error);
        this.$message.error('删除订单失败：' + (error.message || '网络错误'));
      }
    },
    // 获取物流状态对应的类型
    getLogisticsStatusType(status) {
      const typeMap = {
        0: 'info',
        1: 'primary',
        2: 'success',
        3: 'danger',
        5: 'info'
      }
      return typeMap[status] || 'info'
    },
    // 查看物流信息
    async handleViewLogistics(order) {
      try {
        const res = await Request.get(`/logistics/order/${order.id}`)
        if (res.code === '0') {
          this.logisticsInfo = res.data
          this.logisticsDialogVisible = true
        } else {
          this.$message.error(res.msg || '暂无物流信息')
        }
      } catch (error) {
        console.error('获取物流信息失败:', error)
        this.$message.error('获取物流信息失败')
      }
    },
    // 查看订单详情
    handleDetail(order) {
      this.currentOrder = order
      this.detailDialogVisible = true
    },
    // 添加查看退款详情方法
    async handleViewRefund(order) {
      try {
        this.refundDetail = null;
        this.refundDetailDialogVisible = true;
        const res = await Request.get(`/refund/order/${order.id}`);
        if (res.code === '0') {
          this.refundDetail = res.data;
        } else {
          this.$message.error(res.msg || '获取退款详情失败');
          this.refundDetailDialogVisible = false;
        }
      } catch (error) {
        console.error('获取退款详情失败:', error);
        this.$message.error('获取退款详情失败');
        this.refundDetailDialogVisible = false;
      }
    },
    // 获取退款状态文本
    getRefundStatusText(status) {
      const statusMap = {
        0: '申请中',
        1: '已同意',
        2: '已拒绝',
        3: '退款中',
        4: '已退款',
        5: '退款失败'
      };
      return statusMap[status] || '未知状态';
    },
    // 获取退款状态类型
    getRefundStatusType(status) {
      const typeMap = {
        0: 'info',
        1: 'success',
        2: 'danger',
        3: 'warning',
        4: 'success',
        5: 'danger'
      };
      return typeMap[status] || 'info';
    },
    // 解析凭证图片
    parseEvidenceImages(evidenceImages) {
      try {
        if (!evidenceImages) return [];
        const images = JSON.parse(evidenceImages);
        // 处理图片URL，确保正确显示
        return images.map(img => {
          // 如果已经是完整路径，直接返回
          if (img.startsWith('/api/')) {
            return img;
          }
          // 如果是相对路径，添加api前缀
          return `/api${img}`;
        });
      } catch (error) {
        console.error('解析凭证图片失败:', error);
        return [];
      }
    },
    // 添加复制快递单号的方法
    copyTrackingNumber(trackingNumber) {
      const input = document.createElement('input')
      input.value = trackingNumber
      document.body.appendChild(input)
      input.select()
      document.execCommand('copy')
      document.body.removeChild(input)
      this.$message.success('快递单号已复制')
    },
    getLogisticsStepActive(status) {
      const stepMap = {
        0: 0,
        1: 1,
        2: 2,
        3: 2,
        5: 2
      };
      return stepMap[status] || 0;
    },
  },
  computed: {
    orderStatusText() {
      const statusMap = {
        0: '待支付',
        1: '已支付',
        2: '已发货',
        3: '已完成',
        4: '已取消',
        5: '已退款'
      }
      return (status) => statusMap[status] || '未知状态'
    },

    orderStatusType() {
      const typeMap = {
        0: 'warning',
        1: 'primary',
        2: 'success',
        3: 'success',
        4: 'info',
        5: 'info'
      }
      return (status) => typeMap[status] || 'info'
    },
  },
  beforeDestroy() {
    // 组件销毁前清除所有计时器
    if (this.pollingTimer) {
      clearTimeout(this.pollingTimer);
    }
    if (this.pollingCountdown) {
      clearInterval(this.pollingCountdown);
    }
  }
}
</script>

<style scoped>
.order-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #fff8e1 0%, #fff3e0 100%);
  position: relative;
  overflow: hidden;
}

/* 背景装饰 */
.bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.circle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.1), rgba(255, 193, 7, 0.05));
}

.circle-1 {
  width: 600px;
  height: 600px;
  top: -200px;
  right: -100px;
}

.circle-2 {
  width: 400px;
  height: 400px;
  bottom: -100px;
  left: -100px;
}

.circle-3 {
  width: 300px;
  height: 300px;
  top: 40%;
  right: 10%;
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.05), rgba(255, 152, 0, 0.08));
}

.leaf {
  position: absolute;
  background-color: rgba(255, 152, 0, 0.1);
  border-radius: 50% 0;
  transform: rotate(45deg);
}

.leaf-1 {
  width: 200px;
  height: 200px;
  bottom: 10%;
  right: 5%;
}

.leaf-2 {
  width: 150px;
  height: 150px;
  top: 20%;
  left: 5%;
  transform: rotate(-30deg);
}

.main-content {
  flex: 1;
  padding: 32px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

/* 页面标题样式 */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.page-header h2 {
  font-size: 28px;
  font-weight: 600;
  color: #F57C00;
  margin: 0;
  position: relative;
}

.order-count {
  color: #FF9800;
  font-size: 14px;
  font-weight: 500;
  background: rgba(255, 193, 7, 0.1);
  padding: 6px 16px;
  border-radius: 20px;
}

/* 订单容器 */
.order-container {
  min-height: 400px;
  position: relative;
}

/* 订单列表样式 */
.order-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.order-card {
  background: white;
  border-radius: 16px;
  border: 1px solid rgba(255, 193, 7, 0.1);
  overflow: hidden;
  transition: all 0.3s;
  box-shadow: none;
}

.order-card:hover {
  box-shadow: 0 6px 16px rgba(255, 152, 0, 0.08);
  transform: translateY(-2px);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: rgba(255, 193, 7, 0.05);
  border-bottom: 1px solid rgba(255, 193, 7, 0.1);
}

.order-info {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.order-id, .order-no, .order-time {
  color: #606266;
  font-size: 14px;
}

.status-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
}

.order-status {
  font-size: 13px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 20px;
}

.order-status.pending {
  color: #e6a23c;
  background: rgba(230, 162, 60, 0.1);
}

.order-status.paid {
  color: #409eff;
  background: rgba(64, 158, 255, 0.1);
}

.order-status.shipped {
  color: #FF9800;
  background: rgba(255, 152, 0, 0.1);
}

.order-status.completed {
  color: #FF9800;
  background: rgba(255, 152, 0, 0.1);
}

.order-status.cancelled {
  color: #909399;
  background: rgba(144, 147, 153, 0.1);
}

.order-status.refunded {
  color: #909399;
  background: rgba(144, 147, 153, 0.1);
}

.delete-icon {
  cursor: pointer;
  color: #909399;
  font-size: 16px;
  transition: all 0.3s;
}

.delete-icon:hover {
  color: #f56c6c;
}

/* 订单内容样式 */
.order-content {
  padding: 24px;
}

.product-info {
  display: grid;
  grid-template-columns: 120px 1fr 280px;
  gap: 24px;
  align-items: start;
}

.product-image {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 193, 7, 0.1);
  transition: all 0.3s;
  cursor: pointer;
}

.product-image:hover {
  transform: scale(1.05);
  border-color: #FF9800;
}

.product-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.product-name {
  font-size: 16px;
  font-weight: 500;
  color: #F57C00;
  margin: 0;
  cursor: pointer;
  transition: color 0.3s;
}

.product-name:hover {
  color: #FF9800;
}

.product-price {
  display: flex;
  align-items: center;
  gap: 8px;
}

.price {
  color: #ff4757;
  font-size: 18px;
  font-weight: 600;
}

.original-price {
  color: #909399;
  font-size: 14px;
  text-decoration: line-through;
}

.quantity {
  color: #606266;
  font-size: 14px;
  margin-left: 8px;
}

.quantity-controls {
  display: flex;
  justify-content: space-between;
}

.inventory {
  font-size: 13px;
  color: #606266;
  padding: 4px 8px;
  background: rgba(255, 193, 7, 0.05);
  border-radius: 4px;
}

/* 收货信息样式 */
.delivery-info {
  background: rgba(255, 193, 7, 0.03);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 193, 7, 0.1);
}

.delivery-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: #F57C00;
  font-weight: 500;
  font-size: 14px;
}

.delivery-header i {
  color: #FF9800;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #606266;
  font-size: 14px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-item i {
  color: #FF9800;
  font-size: 14px;
}

/* 订单底部样式 */
.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: rgba(255, 193, 7, 0.05);
  border-top: 1px solid rgba(255, 193, 7, 0.1);
}

.order-total {
  color: #606266;
  font-size: 15px;
}

.total-price {
  color: #ff4757;
  font-size: 18px;
  font-weight: 600;
}

.order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.order-actions .el-button {
  border-radius: 20px;
}

.order-actions .el-button--primary {
  background: linear-gradient(135deg, #FF9800, #FFC107);
  border: none;
}

.order-actions .el-button--success {
  background: linear-gradient(135deg, #FF9800, #FFC107);
  border: none;
}

.order-actions .el-button--warning {
  background: linear-gradient(135deg, #e6a23c, #f0ad4e);
  border: none;
}

.order-actions .el-button--danger {
  background: linear-gradient(135deg, #f56c6c, #ff7875);
  border: none;
}

.order-actions .el-button--info {
  background: linear-gradient(135deg, #909399, #a6a9ad);
  border: none;
}

.order-actions .el-button--danger.is-plain {
  background: transparent;
  border: 1px solid #f56c6c;
  color: #f56c6c;
}

.order-actions .el-button i {
  margin-right: 4px;
}

/* 分页样式 */
.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin: 40px 0;
  padding: 20px 0;
}

:deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
  background: linear-gradient(135deg, #FF9800, #FFC107);
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.2);
}

:deep(.el-pagination.is-background .el-pager li:not(.disabled):hover) {
  color: #FF9800;
}

/* 空订单样式 */
.empty-order {
  padding: 60px 0;
}

.empty-text {
  margin-top: 16px;
}

.main-text {
  font-size: 18px;
  color: #F57C00;
  margin-bottom: 8px;
}

.sub-text {
  font-size: 14px;
  color: #606266;
}

:deep(.el-empty .el-button) {
  margin-top: 20px;
  padding: 12px 30px;
  font-size: 15px;
  border-radius: 24px;
  background: linear-gradient(135deg, #FF9800, #FFC107);
  border: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.2);
}

:deep(.el-empty .el-button:hover) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 152, 0, 0.3);
}

/* 对话框样式 */
:deep(.custom-dialog) {
  border-radius: 16px;
  overflow: hidden;
}

:deep(.custom-dialog .el-dialog__header) {
  background: linear-gradient(to right, #FF9800, #FFC107);
  padding: 16px 20px;
  color: white;
}

:deep(.custom-dialog .el-dialog__title) {
  color: white;
  font-weight: 500;
}

:deep(.custom-dialog .el-dialog__headerbtn .el-dialog__close) {
  color: rgba(255, 255, 255, 0.9);
}

/* 用户余额信息样式 */
.user-balance-info {
  background: rgba(255, 193, 7, 0.05);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  text-align: center;
  border: 1px solid rgba(255, 193, 7, 0.1);
}

.balance-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: #F57C00;
  font-size: 16px;
}

.balance-header i {
  margin-right: 8px;
  color: #FF9800;
  font-size: 20px;
}

.balance-amount {
  font-size: 28px;
  font-weight: 600;
  color: #FF9800;
  margin-bottom: 12px;
}

.balance-amount.insufficient {
  color: #f56c6c;
}

.balance-status {
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.balance-status i {
  margin-right: 6px;
}

.balance-status .el-icon-success {
  color: #FF9800;
}

.balance-status .el-icon-warning {
  color: #e6a23c;
}

/* 支付选项样式 */
.payment-options {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.insufficient-tip {
  font-size: 12px;
  color: #f56c6c;
  margin-left: 5px;
}

/* 输入框样式 */
:deep(.el-input-number) {
  width: 120px;
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-input-number .el-input__inner) {
  text-align: center;
  border: 1px solid rgba(255, 193, 7, 0.2);
  transition: all 0.3s ease;
}

:deep(.el-input-number .el-input__inner:hover) {
  border-color: #FF9800;
}

:deep(.el-input-number__increase:hover),
:deep(.el-input-number__decrease:hover) {
  color: #FF9800;
}

/* 响应式调整 */
@media (max-width: 992px) {
  .product-info {
    grid-template-columns: 100px 1fr;
  }

  .delivery-info {
    grid-column: span 2;
    margin-top: 16px;
  }
}

/* 添加地址对话框样式 */
.address-dialog-content {
  min-height: 200px;
  max-height: none;
  overflow-y: visible;
}

.dialog-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 193, 7, 0.1);
}

.dialog-section-title span {
  font-size: 16px;
  font-weight: 500;
  color: #F57C00;
}

.address-radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.address-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border: 1px solid rgba(255, 193, 7, 0.1);
  border-radius: 8px;
  padding: 12px;
  transition: all 0.3s;
}

.address-item:hover {
  border-color: #FFC107;
  background-color: rgba(255, 193, 7, 0.03);
}

:deep(.address-radio) {
  margin-right: 0;
  width: 100%;
  border: none !important;
}

:deep(.address-radio .el-radio__label) {
  padding-left: 12px;
  width: 100%;
}

.address-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.address-contact {
  display: flex;
  gap: 12px;
  align-items: center;
}

.address-name {
  font-weight: 500;
  color: #F57C00;
}

.address-phone {
  color: #606266;
}

.address-text {
  color: #606266;
  font-size: 14px;
  line-height: 1.4;
}

.address-actions {
  display: flex;
  gap: 8px;
}

.delete-btn {
  color: #f56c6c;
}

.no-address {
  padding: 30px 0;
  text-align: center;
}

.address-edit-form {
  padding: 16px 0;
}

@media (max-width: 768px) {
  .main-content {
    padding: 16px;
  }

  .order-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .status-wrapper {
    align-self: flex-end;
  }

  .product-info {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .product-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    max-width: 200px;
    margin: 0 auto;
  }

  .order-footer {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .order-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .header-right {
    align-self: stretch;
  }

  .header-right .el-button {
    width: 100%;
  }
}

/* 评价对话框样式 */
.review-dialog-content {
  padding: 20px 0;
}

.review-product-info {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 193, 7, 0.1);
}

.review-product-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 193, 7, 0.1);
}

.review-product-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.review-product-name {
  font-size: 16px;
  font-weight: 500;
  color: #F57C00;
  margin: 0;
}

.review-product-price {
  display: flex;
  align-items: center;
  gap: 8px;
}

.review-form {
  padding: 16px 0;
}

.upload-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 8px;
}

:deep(.el-rate__text) {
  font-size: 14px;
  margin-left: 8px;
}

:deep(.el-rate__icon) {
  font-size: 24px;
  margin-right: 6px;
}

:deep(.el-upload--picture-card) {
  width: 100px;
  height: 100px;
  line-height: 100px;
}

:deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 100px;
  height: 100px;
}

/* 退款对话框样式 */
.refund-dialog-content {
  padding: 20px 0;
}

.refund-product-info {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 193, 7, 0.1);
}

.refund-product-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 193, 7, 0.1);
}

.refund-product-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.refund-product-name {
  font-size: 16px;
  font-weight: 500;
  color: #F57C00;
  margin: 0;
}

.refund-product-price {
  display: flex;
  align-items: center;
  gap: 8px;
}

.refund-order-info {
  display: flex;
  gap: 16px;
  font-size: 14px;
  color: #606266;
}

.refund-form {
  padding: 16px 0;
}

.refund-amount-tip {
  margin-left: 12px;
  font-size: 14px;
  color: #909399;
}

/* 退款详情对话框样式 */
.refund-detail-content {
  min-height: 300px;
}

.refund-detail-wrapper {
  padding: 16px 0;
}

.refund-status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 193, 7, 0.1);
}

.refund-amount {
  font-size: 16px;
  color: #606266;
}

.refund-amount span {
  font-weight: 600;
  color: #ff4757;
  font-size: 18px;
}

.refund-detail-section {
  margin-bottom: 24px;
  padding: 16px;
  background: rgba(255, 193, 7, 0.03);
  border-radius: 8px;
  border: 1px solid rgba(255, 193, 7, 0.1);
}

.section-title {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 500;
  color: #F57C00;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 193, 7, 0.1);
}

.info-item {
  display: flex;
  margin-bottom: 8px;
  font-size: 14px;
}

.info-item .label {
  width: 120px;
  color: #606266;
}

.info-item .value {
  color: #303133;
  flex: 1;
}

.evidence-images {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.evidence-image {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid rgba(255, 193, 7, 0.1);
  transition: all 0.3s;
}

.evidence-image:hover {
  transform: scale(1.05);
  border-color: #FFC107;
}

.refund-product-card {
  display: flex;
  gap: 16px;
  align-items: center;
}

.refund-product-card .product-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 193, 7, 0.1);
}

.refund-product-card .product-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.refund-product-card .product-name {
  font-size: 16px;
  font-weight: 500;
  color: #F57C00;
  margin: 0;
}

.refund-product-card .product-price {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 支付状态检查对话框样式 */
.payment-status-dialog-content {
  text-align: center;
  padding: 20px 0;
}

.payment-status-icon {
  font-size: 60px;
  margin-bottom: 20px;
}

.payment-status-icon.loading {
  color: #409EFF;
}

.payment-status-icon.success {
  color: #FF9800;
}

.payment-status-icon.warning {
  color: #E6A23C;
}

.payment-status-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #303133;
}

.payment-status-desc {
  font-size: 14px;
  color: #606266;
  margin-bottom: 24px;
  line-height: 1.6;
}

.payment-countdown {
  background: rgba(64, 158, 255, 0.1);
  padding: 12px 20px;
  border-radius: 8px;
  margin: 20px auto;
  max-width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.countdown-number {
  font-size: 18px;
  font-weight: 600;
  color: #409EFF;
  margin: 0 5px;
}

.payment-actions {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 16px;
}

.payment-status-tips {
  margin-top: 24px;
  background: rgba(255, 152, 0, 0.1);
  border-left: 4px solid #FF9800;
  padding: 12px 16px;
  text-align: left;
  border-radius: 4px;
}

.payment-status-tips h4 {
  font-size: 15px;
  margin: 0 0 8px 0;
  color: #FF9800;
}

.payment-status-tips p {
  font-size: 13px;
  margin: 5px 0;
  color: #606266;
}

/* 查看物流对话框样式 */
.logistics-detail {
  min-height: 300px;
}

.logistics-detail-wrapper {
  padding: 16px 0;
}

.logistics-status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 193, 7, 0.1);
}

.logistics-order-no {
  font-size: 16px;
  color: #606266;
}

.logistics-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.label {
  font-weight: 500;
  color: #606266;
}

.tracking-number {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logistics-timeline {
  margin-top: 24px;
}

.no-logistics-info {
  text-align: center;
  margin-top: 24px;
  color: #909399;
}

.status-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.update-time {
  font-size: 14px;
  color: #909399;
}

.time-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.time-label {
  font-weight: 500;
  color: #606266;
}

.time-value {
  color: #303133;
}

.time-divider {
  width: 1px;
  height: 16px;
  background-color: #909399;
}

.logistics-info-card {
  background: rgba(255, 193, 7, 0.03);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 193, 7, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: #F57C00;
  font-weight: 500;
  font-size: 14px;
}

.card-header i {
  color: #FF9800;
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.express-company {
  display: flex;
  align-items: center;
  gap: 16px;
}

.company-logo {
  width: 40px;
  height: 40px;
}

.company-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.company-name {
  font-size: 16px;
  font-weight: 500;
  color: #F57C00;
}

.express-time-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.address-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.address-contact {
  display: flex;
  gap: 12px;
  align-items: center;
}

.contact-name {
  font-weight: 500;
  color: #F57C00;
}

.contact-phone {
  color: #606266;
}

.address-detail {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-progress .el-step {
  flex: 1;
  text-align: center;
  width: 100px;
}

.status-progress .el-step__title {
  font-size: 14px;
  color: #606266;
}

.status-progress .el-step__description {
  font-size: 12px;
  color: #909399;
}

.status-progress .el-step.is-finish .el-step__title {
  color: #FF9800;
}

.status-progress .el-step.is-finish .el-step__description {
  color: #606266;
}

.status-progress .el-step.is-process .el-step__title {
  color: #409EFF;
}

.status-progress .el-step.is-process .el-step__description {
  color: #606266;
}

.status-progress .el-step.is-wait .el-step__title {
  color: #909399;
}

.status-progress .el-step.is-wait .el-step__description {
  color: #909399;
}

.logistics-dialog :deep(.el-dialog__body) {
  padding: 30px;
}

.logistics-detail-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.logistics-status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 193, 7, 0.1);
}

.logistics-info-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 0;
  border: none;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: #F57C00;
  font-weight: 500;
  font-size: 16px;
}

.card-header i {
  font-size: 20px;
  color: #FF9800;
}

.card-content {
  padding: 0 10px;
}

.express-company {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 0;
}

.company-logo {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  padding: 5px;
  background: #f8f8f8;
  object-fit: contain;
}

.company-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.company-name {
  font-size: 18px;
  font-weight: 500;
  color: #F57C00;
}

.tracking-number {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 15px;
  color: #606266;
}

.time-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.time-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed #eaeaea;
}

.time-item:last-child {
  border-bottom: none;
}

.time-label {
  font-weight: 500;
  color: #606266;
  font-size: 15px;
}

.time-value {
  color: #303133;
  font-size: 15px;
}

.address-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.address-contact {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed #eaeaea;
}

.contact-name {
  font-weight: 500;
  color: #F57C00;
  font-size: 16px;
}

.contact-phone {
  color: #606266;
  font-size: 15px;
}

.address-detail {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
}

.address-detail i {
  color: #FF9800;
  font-size: 18px;
  margin-top: 2px;
}

.address-detail span {
  line-height: 1.5;
  color: #303133;
  font-size: 15px;
}

.status-progress {
  padding: 20px 0 10px;
}

.status-progress :deep(.el-step__head.is-process) {
  color: #FF9800;
  border-color: #FF9800;
}

.status-progress :deep(.el-step__head.is-finish) {
  color: #FF9800;
  border-color: #FF9800;
}

.status-progress :deep(.el-step__title.is-process) {
  color: #FF9800;
}

.status-progress :deep(.el-step__title.is-finish) {
  color: #FF9800;
}

.no-logistics-info {
  text-align: center;
  padding: 60px 0;
  color: #909399;
}

.no-logistics-info i {
  font-size: 48px;
  margin-bottom: 20px;
  color: #e6a23c;
}

.no-logistics-info p {
  font-size: 16px;
}

/* 删除订单对话框样式 */
.delete-dialog-content {
  padding: 20px 0;
  text-align: center;
}

.warning-icon {
  font-size: 48px;
  color: #e6a23c;
  margin-bottom: 16px;
}

.delete-warning-text {
  font-size: 16px;
  color: #303133;
  margin: 0 0 8px 0;
  font-weight: 500;
}

.delete-tip {
  font-size: 14px;
  color: #909399;
  margin: 0 0 24px 0;
}

.order-delete-info {
  background: rgba(255, 193, 7, 0.05);
  border-radius: 8px;
  padding: 16px;
  text-align: left;
  margin-top: 16px;
}

.order-delete-info p {
  margin: 8px 0;
  font-size: 14px;
  color: #606266;
}

/* 自定义加载提示样式 */
.custom-loading {
  text-align: center;
  padding: 20px;
}

.custom-loading .el-icon-loading {
  font-size: 24px;
  margin-right: 10px;
  color: #409eff;
}

.custom-loading-message .el-message-box__content {
  padding: 0;
}
</style>